import * as React from 'react';
// import classnames from 'classnames';
import { Button, Dialog } from 'antd-mobile';
import { OrderListItemProps } from '../types';
import { useNavigate } from 'react-router-dom';
import { sleep } from 'antd-mobile/es/utils/sleep';
import './index.module.scss';

export default function OrderItem(props: OrderListItemProps) {
  const { orderList, toDeleteOrder } = props;
  const navigate = useNavigate();
  const handlerClick = (val: string, status: number, item: object) => {
    // navigate(`/orderDetail?orderId=${val}&boxShow=true&orderStatus=${status}`);
    navigate(
      `/orderDetail?orderId=${val}&boxShow=true&orderStatus=${status}&data=${item}`
    );
  };
  const deleteOrder = (val: number) => {
    toDeleteOrder(val);
  };
  return (
    <>
      {orderList.map((item, index) => {
        let statusInfo = '已取消';
        if (+item.status === 1) {
          statusInfo = '已完成';
        }
        if (+item.status === 2) {
          statusInfo = '待支付';
        }
        if (+item.status === 3) {
          statusInfo = '已退款';
        }
        return (
          <div
            styleName="order-list"
            key={index}
            onClick={() => handlerClick(item.id + '', +item.status, item)}
          >
            <div styleName="order-info">
              <div styleName="o-l-left">
                <div styleName="train-name">
                  {item.trainName}
                </div>
                <div styleName="seat-info">
                  {item.carriag}车{item.seatNumber}号
                </div>
                <div styleName="ticket-date">{item.ticketDate}</div>
              </div>
              <div styleName="o-l-right">
                <div styleName="money">¥{item.priceMsg}</div>
                <div styleName="ticket-status">{statusInfo}</div>
              </div>
            </div>
            <div styleName="bottom-button">
              <Button
                size="small"
                styleName="button-style"
                fill="outline"
                onClick={(e) => {
                  e.stopPropagation();
                  e.nativeEvent.stopImmediatePropagation();
                  Dialog.confirm({
                    content:
                      '删除订单后将无法还原，订单删除不等于取消预订，确定完全删除此订单？',
                    onConfirm: async () => {
                      await sleep(1000);
                      deleteOrder(item.id);
                    },
                  });
                }}
              >
                删除订单
              </Button>
            </div>
          </div>
        );
      })}
    </>
  );
}
